<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <div class="clients-list">
          <ul class="nav nav-tabs">
            <li class="active"></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active">
              <div class="ibox float-e-margins">
                <div class="ibox-content">
                  <table class="table">
                    <tr>
                      <td>
                        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8"
                            @submit.prevent="page(1)">
                          <div class="form-group">
                            <label class="font-noraml">完成时间</label>
                            <div class="input-daterange input-group">
                              <input autocomplete="off" type="text" placeholder="点击输入起始时间" class="input-sm form-control"
                                  name="dateBegin" id="dateBegin"/>
                              <span class="input-group-addon">到</span>
                              <input autocomplete="off" type="text" placeholder="点击输入截止时间" class="input-sm form-control"
                                  name="dateEnd" id="dateEnd"/>
                            </div>
                          </div>
                          <div class="form-group">
                            <label class="font-noraml">河道名称</label>
                            <input type="text" name="riverCourseName" placeholder="请输入" class="input-sm form-control">
                          </div>
                          <div class="form-group">
                            <label class="font-noraml">巡查人</label>
                            <input type="text" name="executorName" placeholder="请输入" class="input-sm form-control">
                          </div>
                          <div class="form-group">
                            <input type="hidden" id="areaIds" name="areaIds" v-model="staff.dto().areaId"/>
                            <div class="form-group">
                              <vue-area areaId="filterAreaIds"
                                  areaName="filterAreaNames"
                                  areaRequired="true,true,true,false,false"
                                  :areaIdVal="staff.dto().areaId"
                                  :areaNameVal="staff.dto().areaName"
                                  :areaFixed="staff.dto().areaId"
                                  :selectBy="staff.dto().areaId"
                              >
                              </vue-area>
                            </div>
                          </div>
                          <div class="form-group">
                            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
                          </div>
                        </form>
                        <a href="javascript:;" @click="exportXls()" class="btn btn-info m-t"><i class="fa fa-file-excel-o"></i> 导出数据</a>
                      </td>
                    </tr>
                  </table>
                  <div class="table-responsive table-scrollable">
                    <table class="table table-bordered table-striped  table-hover">
                      <thead>
                      <tr>
                        <th style="width:20px;">#</th>
                        <th>河道名称</th>
                        <th>行政区划</th>
                        <th>巡查类型</th>
                        <th>任务内容</th>
                        <th>巡查人</th>
                        <th>日志是否正常</th>
                        <th>巡查时间</th>
                        <th>操作</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-if="result.data.data && result.data.data.length>0"
                          v-for="(item, index) in result.data.data">
                        <td>{{ (result.data.pageIndex - 1) * result.data.pageSize + index + 1 }}</td>
                        <td>{{ item.riverCourseName }}</td>
                        <td>{{ item.areaNames }}</td>
                        <td>{{ item.executorRole }}</td>
                        <td>{{ item.taskContent }}</td>
                        <td>{{ item.executorName }}</td>
                        <td>{{ item.status }}</td>
                        <td>{{ item.excEndTime | date('yyyy-MM-dd HH:mm:ss') }}</td>
                        <td>
                          <!--<a href="javascript:;" v-show='staff.hasPermission("patrolTask:info")' @click="info('i',item)"-->
                          <!--rel="nofollow" class="label label-info"><i class="fa fa-bookmark"></i> 详情</a>-->
                          <a :href="'/patrol/log_detail/'+item.id" v-show='staff.hasPermission("patrolTask:edit")'
                              class="label label-success"><i class="fa fa-edit"></i> 查看日志</a>
                          <a href="javascript:;" v-show='staff.hasPermission("patrolTaskLog:del")' @click="del(item)"
                              rel="nofollow" class="label label-danger"><i class="fa fa-trash-o"></i> 删除</a>
                        </td>
                      </tr>
                      <tr v-if="result.data.data==null || result.data.data.length==0">
                        <td colspan="9">
                          <div class="alert"><strong>{{ result | message }}</strong></div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                    <div class="b_page" v-html="tagPages"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/datepicker-vendor.js'
import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import {$storage, axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'
import vueArea from '@/components/vue-area-portal-log'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.page(1);
    });
    laydate.render({elem: '#dateBegin', event: 'click', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'});
    laydate.render({elem: '#dateEnd', event: 'click', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'});
  },
  watch: {
    // result: function (val) {
    //   this.$nextTick(function () { console.info('变量result渲染完成'); }
    // }
  },
  methods: {
    page(pageIndex) {
      let that = this;
      if (!pageIndex) pageIndex = 1;
      axios.post(site.patrolTaskLogJunior.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.result = result;
          that.tagPages = that.tag.page(result.data);
        } else {
          alert(result.message);
        }
      });
    },
    info(title, item) {
      $storage.setItem(site.patrolTask.info, item.id);
      this.lbox.openMyBoxLayer(title, site.patrolTask.view + '/info');
    },
    edit(title, item) {
      $storage.setItem(site.patrolTask.info, item.id);
      this.lbox.openMyBoxLayer(title, site.patrolTask.view + '/edit');
    },
    del(item) {
      let that = this;
      if (confirm('确认删除吗?')) {
        axios.post(site.patrolTaskLog.del + item.id, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.page(that.result.data.pageIndex);
            alert('删除成功');
          } else {
            alert(result.message);
          }
        });
      }
    },
    exportXls() {
      let formJson = $('#info_search_form').serializeObject();
      // console.info(formJson)
      var formHtmlStr = `<form method="post" action="${site.patrolTask.exportPatrolTaskLogJunior}">
                               <input type="hidden" name="Authorization" value="${$storage.getItem('authorizationToken')}">`;
      for (let key in formJson) {
        // console.info(key)
        formHtmlStr += `<input type="hidden" name="${key}" value="${formJson[key]}">`;
      }
      formHtmlStr += `</form>`;
      // console.info(formHtmlStr)
      var $eleForm = $(formHtmlStr);
      $(document.body).append($eleForm);
      // 提交表单，实现下载
      $eleForm.submit().remove();
    }
  }
}
</script>
